<template>
  <div class="client-admin">
    <div class="filter-area">
      <el-row>
        <el-col :span="6">
          <div class="filter-item">
            <div class="item-content">
              经销商名称：
            </div>
            <div class="item-input">
              <el-input size="small" v-model="input_dealerName" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="filter-item">
            <div class="item-content">
              业代姓名：
            </div>
            <div class="item-input">
              <el-autocomplete
                  class="inline-input"
                  v-model="input_memberID"
                  :fetch-suggestions="querySearch"
                  placeholder="选择业代姓名"
                  :trigger-on-focus="false"
                  @select=""
                  size="small"
              ></el-autocomplete>
            </div>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="content-total">
      <el-card class="box-card"  shadow="never">
        <div class="total-main">
          数据小计
        </div>
        <el-row v-for="clientSt in clientStatistics">
          <el-col class="total-item" :span="8">
            <div class="total-title">
              经销商：<span>{{clientSt.name}}</span>
            </div>
          </el-col>
          <el-col class="total-item" :span="8">
            <div class="total-title">
              销售组：<span>{{clientSt.group}}</span>
            </div>
          </el-col>
          <el-col class="total-item" :span="8">
            <div class="total-title">
              带店数量：<span>{{clientSt.count}} 家</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="content-area" v-infinite-scroll="loadMore">
      <vxe-table
          ref="clientTable"
          show-overflow
          :loading="fullscreenLoading"
          :column-config="{resizable: true}"
          :row-config="{isHover: true}"
          :align="allAlign"
          :data="clientList">
        <vxe-column field="account_no" title="网点编码" fixed="left"></vxe-column>
        <vxe-column field="name" title="网点名称"></vxe-column>
        <vxe-column field="dealer_id__r" title="所属经销商"></vxe-column>
        <vxe-column field="owner_department" title="销售组"></vxe-column>
        <vxe-column field="relevant_team__r" title="所属业代"></vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import {
  api_getAPIKeyDict, api_getCheckInSearchResult, api_getClientList,
  api_getEmployeeList
} from "../api";
import {getMemberIDByName} from '../tools';

const url_path = "https://www.fxiaoke.com/FSC/EM/File/GetByPath?path="
export default {
  name: "client-admin",
  components: {},
  data: function () {
    return {
      url_path,
      apiKeyDict: {},
      input_dealerName: "",
      input_dateRange: "",
      input_memberID: "",
      iuput_startTime: 0,
      input_endTime: 0,
      fullscreenLoading: false,
      clientList: [],
      tmp_clientList: [],
      clientStatistics: [],
      allAlign: null,
      imgsArr: [],
      employeeList: [],
      col: 4,
      page: 1,
      hasMore: true
    }
  },
  computed: {
    itemWidth() {
      return (138 * 0.5 * (document.documentElement.clientWidth / 375))
    },
    gutterWidth() {
      return (9 * 0.5 * (document.documentElement.clientWidth / 375))
    }
  },
  methods: {
    testFunc(value) {
      if (value != null) {
        this.iuput_startTime = Number(value[0]);
        this.input_endTime = Number(value[1]);
      } else {
        this.iuput_startTime = Number(0);
        this.input_endTime = Number(0);
      }

      console.log(this.iuput_startTime, this.input_endTime);
    },
    querySearch(queryString, cb) {
      var employeeList = this.employeeList;
      console.log("employeeList------->", employeeList)
      var results = queryString ? employeeList.filter(this.createFilter(queryString)) : employeeList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSearch() {
      const _this = this;
      _this.clientList = [];
      _this.tmp_clientList = [];
      _this.clientStatistics = [];
      _this.page = 1;
      _this.hasMore = true;
      _this.fetchClientListByPage();
    },
    deal_clientStatistics(){
      const _this = this;
      _this.clientList.forEach((client, clientIndex)=>{
        let name = client["dealer_id__r"];
        let group = client["owner_department"];
        let _clientStatistics = {
          "name": name,
          "group": group,
          "count": 1
        }
        let _alreadyExist = false;
        _this.clientStatistics.forEach((stasisticsItem, stasisticsIndex)=>{
          if(stasisticsItem["name"] == name){
            _alreadyExist = true;
            _this.clientStatistics[stasisticsIndex]["count"] += 1;
          }
        })
        if(!_alreadyExist){
          _this.clientStatistics.push(_clientStatistics)
        }
      })
    },
    fetchClientListByPage() {
      const _this = this;
      let memberID = ""
      _this.fullscreenLoading = true;
      if (_this.input_memberID != "") {//此时的input值为用户姓名，还未转换为真实ID
        memberID = getMemberIDByName(_this.input_memberID, _this.employeeList);
        console.log("memberID-------------->", memberID);
      }
      api_getClientList(memberID, _this.input_dealerName, _this.page, 1000).then(res => {
        if(!res){
          _this.fullscreenLoading = false;
          this.$message({
            message: '数据量过大，请增加筛选条件',
            type: 'warning',
            duration: 5000
          });
          return;
        }
        if(res.length==0){
          _this.clientList = _this.tmp_clientList;
          if(_this.hasMore){
            _this.deal_clientStatistics();
          }
          _this.hasMore = false;
          _this.fullscreenLoading = false;
          return;
        }
        if (res != undefined) {
          _this.tmp_clientList = _this.tmp_clientList.concat(res);
        }
        _this.fullscreenLoading = false;
        _this.page = _this.page + 1;
        this.fetchClientListByPage();
      });
    },
    loadMore() {
      const _this = this;
      if (_this.clientList.length > 0 && _this.fullscreenLoading == false && _this.hasMore) {
        console.log("loadMore------------------>>>>>>>>>>");
        _this.fetchClientListByPage();
      }
      if (!_this.hasMore) {
        console.log("没有更多了------------------>>>>>>>>>>");
      }
    }
  },
  mounted() {
    const _this = this;
    _this.fullscreenLoading = true;
    api_getEmployeeList().then(res => {
      res.forEach(item => {
        item["value"] = item["name"]
      })
      _this.employeeList = res;
      _this.fullscreenLoading = false;
    })
  }
}
</script>
<style scoped lang="less">
.client-admin {
  min-width: 936px;
  background-color: #FEFFFE;
}

.filter-area {
  padding: 10px;
  position: fixed;
  top: 0;
  width: 80%;
  z-index: 99;
  background-color: #FFFFFF;
  height: 28px;
  box-shadow: 0 3px 10px 0 rgb(31 35 41 / 4%);
}

.filter-item {
  display: flex;
  height: 32px;

  .item-content {
    line-height: 32px;
    font-weight: 600;
  }

  .item-input {
  }
  height: 32px;
}
.content-total {
  margin: 10px;
  margin-top: 62px;
  .total-main {
    font-size: 22px;
  }
  .total-item {
    margin-top: 10px;
  }
  .total-title{
    font-weight: 600;
    span {
      font-weight: 400;
    }
  }
}
.content-area {
  margin: 10px;
}
</style>
